<template>
  <div>
    <div class="pageheader">
      <!--      <XHeader :left-options="{showBack:false,backText:''}" :title="xheader.title" class="XHeader">-->
      <!--        &lt;!&ndash; <img slot="right" class="user_icon" @click="onMeTap" src="@/assets/img/icon_user.png"> &ndash;&gt;-->
      <!--      </XHeader>-->
    </div>
    <div class="pagetop" style="margin-top: 0">
      <div class="flex flex-center topbar">
        <div class="flex-full inputbox flex flex-center block" @click="onSearchTap">
          <img class="icon" src="@/assets/img/ic_search.png">
          <input style="text-align: left" class="input flex-full" disabled placeholder="搜索商品">
          <!-- <div @click="onScanTap">
              <img class="icon" src="@/assets/img/ic_scanning.png">
          </div>-->
        </div>
      </div>
    </div>
    <div class="tabbar">
      <div class="tabbar-item">
        <chimage class="icon" :src="require('@/assets/img/tab_icon_home_active.png')"></chimage>
        <span class="label">首页</span>
      </div>
      <div class="tabbar-item" @click="onClassTap">
        <chimage class="icon" :src="require('@/assets/img/tab_icon_class.png')"></chimage>
        <span class="label">分类</span>
      </div>
      <div class="tabbar-item" @click="onCartTap">
        <span class="goodsNum" v-if="goodsNum">{{goodsNum}}</span>
        <chimage class="icon" :src="require('@/assets/img/tab_icon_cart.png')"></chimage>
        <span class="label">购物车</span>
      </div>
      <div class="tabbar-item" @click="onMeTap">
        <chimage class="icon" :src="require('@/assets/img/tab_icon_me.png')"></chimage>
        <span class="label">我的</span>
      </div>
    </div>
    <div class="page">

      <!--公告-->
      <div class="notice" @click="onNotice" v-if="noticeList.length">
        <img class="notice-icon" :src="require('../../assets/img/icon_notice.png')">
        <div class="notice-title" ref="noticeTitle">
          <div class="notice-title-item" v-for="(item, index) in noticeList" :key="index">{{item.n_title}}</div>
        </div>
      </div>

      <!--banner-->
      <div v-if="bannerList.length" class="swiper-block">
        <!--        <div class="block swiper-container-banner" v-if="bannerList.length">-->
        <!--          <div class="swiper-wrapper">-->
        <!--            <div class="swiper-slide" v-for="item in bannerList" :key="item.id" @click="onSpecialTap(item)">-->
        <!--              <img :src="item.adv_img">-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="swiper-pagination"></div>-->
        <!--        </div>-->
        <swiper class="block swiper-container-banner" :options="swiperOptionBanner" style="padding: 0 12px">
          <swiper-slide v-for="(item) in bannerList" :key="item.id">
            <img :src="item.adv_img" @click="onSpecialTap(item)">
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination" id="swiper-pagination-banner"></div>
      </div>

      <!--菜单-->
      <div class="block swiper-block swiper-block-tab">
        <swiper class="swiper-container swiper-container-tab" style=" margin-top: 0; padding: 0"
                v-if="iconNavs.length"
                :options="swiperOptionNav"
        >
          <swiper-slide class="grid-1-4 swiper-slide" v-for="item in iconNavs" :key="item.id">
            <div class="iconbox" @click="onDetailTap(item)">
              <img class="icon" :src="item.icon">
              <div class="text">{{item.name}}</div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination" id="swiper-pagination-tab"></div>
      </div>
      <!--      <div class="block swiper-container swiper-container-tab" style=" margin-top: 12px; padding: 0">-->
      <!--        <div class="grid swiper-wrapper" ref="grid" v-if="iconNavs.length">-->

      <!--          <div class="grid-1-4 swiper-slide" v-for="item in iconNavs" :key="item.id">-->
      <!--            &lt;!&ndash;            <div class="iconbox" @click="onSeckillTap">&ndash;&gt;-->
      <!--            <div class="iconbox" @click="onDetailTap(item)">-->
      <!--              <img class="icon" :src="item.icon">-->
      <!--              <div class="text">{{item.name}}</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4 swiper-slide">-->
      <!--            <div class="iconbox" @click="onGroupTap">-->
      <!--              <img class="icon" src="@/assets/img/icon_pt.png">-->
      <!--              <div class="text">拼团</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4 swiper-slide">-->
      <!--            <div class="iconbox" @click="onGetCouponTap">-->
      <!--              <img class="icon" src="@/assets/img/icon_lq.png">-->
      <!--              <div class="text">领券</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4 swiper-slide">-->
      <!--            <div class="iconbox" @click="onDiscountTap(productSourceType['优品'])">-->
      <!--              <img class="icon" src="@/assets/img/icon_zy.png">-->
      <!--              <div class="text">优品</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4 swiper-slide">-->
      <!--            <div class="iconbox" @click="onDiscountTap(productSourceType['京东'])">-->
      <!--              <img class="icon" src="@/assets/img/icon_jd.png">-->
      <!--              <div class="text">京东</div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="grid-1-4">-->
      <!--            <div class="iconbox" @click="onDiscountTap(productSourceType['严选'])">-->
      <!--              <img class="icon" src="@/assets/img/icon_yx.png">-->
      <!--              <div class="text">严选</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4">-->
      <!--            <div class="iconbox" @click="onOptimizationTap">-->
      <!--              <img class="icon" src="@/assets/img/icon_yx2.png">-->
      <!--              <div class="text">觅来</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="grid-1-4">-->
      <!--            <div class="iconbox" @click="onDistributionTap">-->
      <!--              <img class="icon" src="@/assets/img/icon_fx.png">-->
      <!--              <div class="text">赚钱宝</div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--        </div>-->
      <!--        <div class="swiper-pagination" id="swiper-pagination-tab"></div>-->
      <!--      </div>-->
      <!--三峡京东在线问诊专属链接 暂时不显示-->
      <div v-if="false" class="block online-link">
        <a
          href="https://prodev.m.jd.com/mall/active/2eyaGezU13nFTRJMYvpPu3ox5Hv9/index.html?babelChannel=ttt82&has_native=0&showhead=no">
          <img style="width: 100%" src="https://ulinkmall.oss-cn-chengdu.aliyuncs.com/banner_sx/jd_kjfy.jpg"/>
        </a>
      </div>

      <!--秒杀-->
      <div class="activity block index-back" v-if="seckillList.length">
        <div class="activity-content"
             :style="{width: activeWidthSeckillAndDiscount.seckill}">
          <div class="activity-content-head">
            <div class="activity-content-head-time">
              <span class="activity-content-head-title">限时秒杀</span>
              <div class="activity-content-head-desc">
                <span>{{seckillListStatus.seckill_status == 1 ? '当前场次' : '即将开始'}}</span>
                <span class="activity-content-head-desc-time">
                 <clocker
                   :time="seckillListStatus.seckill_status == 1 ? seckillListStatus.seckill_endtime : seckillListStatus.seckill_starttime"
                   format="'%H : %M : %S'" @on-finish="getSeckillTime">
                    <span class="activity-content-head-desc-tim-num">%H</span>
                    <span class="activity-content-head-desc-tim-bo">:</span>
                    <span class="activity-content-head-desc-tim-num">%M</span>
                    <span class="activity-content-head-desc-tim-bo">:</span>
                    <span class="activity-content-head-desc-tim-num">%S</span>
                 </clocker>
              </span>
              </div>
            </div>
            <div class="activity-content-head-more" @click="onSeckillTap">
              查看更多
            </div>
          </div>
          <ul class="activity-content-box activity-content-mini" :class="[activeWidthSeckillAndDiscount.border]">
            <li class="activity-content-box-item"
                :style="{width: activeWidthSeckillAndDiscount.seckillItem, marginRight: activeWidthSeckillAndDiscount.marginRight}"
                v-for="(item, index) in activeWidthSeckillAndDiscount.seckillList"
                @click="onMallInfo(item.goods_info.goods_sku)"
                :key="index">
              <img class="activity-content-box-item-img" :src="item.goods_info.goods_image_main">
              <div class="activity-content-box-item-price index-ellipsis">￥{{item.seckill_price}}</div>
              <div class="activity-content-box-item-old index-ellipsis">￥{{item.goods_info.reference_price}}</div>
            </li>
          </ul>
        </div>
      </div>

      <!--视频带货-->
      <div class="video block" v-if="specialVideoList && specialVideoList.length">
        <div class="video-con">
          <div class="video-con-header">视频带货</div>
          <swiper :options="swiperOptionVideo">
            <swiper-slide v-for="(item, index) in specialVideoList" :key="index" @click.native="onVideoList">
              <div class="video-con-box">
                <div class="video-con-box-item">
                  <video-playback class="video-con-box-item-left" :imageUrl="item.image_url"
                                  :videoUrl="item.video_url"></video-playback>
                  <div class="video-con-box-item-right">
                    <div class="video-con-box-item-right-title">{{item.title}}</div>
                    <div class="video-con-box-item-right-desc">
                      <i class="video-con-box-item-right-desc-icon"></i>
                      <div class="video-con-box-item-right-desc-text">热卖推荐</div>
                    </div>
                    <div class="video-con-box-item-right-goods">
                      <div class="video-con-box-item-right-goods-item"
                           v-for="(child, childIndex) in (item.topic_goods_list).slice(0, 2)" :key="childIndex">
                        <img class="video-con-box-item-right-goods-item-img"
                             :src="child.goods_image_main">
                        <div class="video-con-box-item-right-goods-item-price">￥{{child.internal_price}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>

      <MallRecommend class="block" :items="recommendlList"></MallRecommend>
      <MallSpecial class="block" :items="specialList"></MallSpecial>
      <!-- <div class="block">
          <img class="streamer" mode="aspectFill" src="@/assets/img/up/01.png">
      </div>-->
      <MallFloor class="block" :items="floorList"></MallFloor>
    </div>

    <!--京东微购提交表单-->
    <form style="display: none" v-if="jdData" :action="jdUrl" method="post" ref="submitJD">
      <label v-for="(item, index) in jdData" :key="index">
        <input type="text" :name="index" :value="item"/>
      </label>
    </form>
  </div>
</template>
<script>
  // @ is an alias to /src
  import { globalData } from '../../config/globalData'
  import Enum from '@/config/enum'
  import MallRecommend from '@/components/mall/MallRecommend'
  import MallSpecial from '@/components/mall/MallSpecial'
  import MallFloor from '@/components/mall/MallFloor'
  import Mall from '@/dll/mall'
  // import Swiper from 'swiper'
  // import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import Account from '../../dll/account'
  import VideoPlayback from '../../components/videoItem/videoPlayback'
  import notice from '../../mixin/notice'

  export default {
    name: 'index',
    mixins: [notice],
    components: {
      swiper,
      swiperSlide,
      MallRecommend,
      MallSpecial,
      MallFloor,
      VideoPlayback
    },
    data: () => {
      return {
        xheader: {
          title: ''
        },
        discountValueList: {},
        iconNavs: [],
        specialList: [],
        bannerList: [],
        recommendlList: [],
        floorList: [],
        productSourceType: Enum.PRODUCT_SOURCE_TYPE,
        jdData: {},
        jdUrl: '',
        swiperOptionBanner: {
          spaceBetween: 12,
          autoplay: true,
          loop: true,
          centeredSlides: true,
          disableOnInteraction: false,
          pagination: {
            el: '#swiper-pagination-banner'
          }
        },
        swiperOptionNav: {
          slidesPerView: 4,
          spaceBetween: 0,
          pagination: {
            el: '#swiper-pagination-tab'
          }
        },

        // 视频带货自动轮播
        swiperOptionVideo: {
          spaceBetween: 1,
          autoplay: {
            delay: 10000 // 10秒切换一次
          },
          loop: true,
          centeredSlides: true,
          disableOnInteraction: false
        },

        // 公告滚动
        noticeTranslateY: 0,
        timerRoll: null,

        // 活动
        seckillList: [], // 秒杀
        seckillListStatus: {}, // 秒杀状态

        // 视频带货
        specialVideoList: []
      }
    },

    watch: {
      $route (to, from) {
        if (to.name !== 'mall') {
          clearInterval(this.timerRoll)
        } else {
          this.setNoticeRoll()
        }
      }
    },

    computed: {
      activeWidthSeckillAndDiscount () { // 活动框宽度
        let _width = {
          seckill: '',
          seckillItem: '',
          discount: '',
          discountItem: '',
          marginRight: '',
          seckillList: [],
          discountList: [],
          border: ''
        }
        if (this.seckillList.length) { // 有秒杀 无折扣
          _width = {
            seckill: '100%',
            seckillItem: '23%',
            discount: '0',
            discountItem: '0',
            marginRight: '3.11%',
            seckillList: this.seckillList.slice(0, 4),
            border: ''
          }
        }
        return _width
      }
    },

    created () {
      this.oauthLogin()
      let from = this.$route.params.from
      if (from) {
        this.$router.push(from)
      }
      let miniToken = this.$route.query.mini_token
      if (miniToken) {
        globalData.access_token = miniToken
        this.globalData.access_token = miniToken
      }
      // this.getNavList()
      this.getSpecialVideoList()
      this.getChannelList()
      this.getFloorList()
      // this.getRecommendlList()
      this.getNavBanner()
      this.GET_GOODS_NUM()
      this.getSeckillTime()
    },

    mounted () {
      this.setNoticeRoll()
    },

    methods: {
      async oauthLogin () {
        let source = this.$route.query.source
        let state = getQueryVariable('state')
        let code = getQueryVariable('code')
        if (state != false && code != false) {
          this.$vux.loading.show({
            text: '登录中'
          })
          let res_token = await Account.authLoginGetToken(state, code)
          if (res_token.code == 0) {
            this.globalData.access_token = res_token.data.access_token
            this.globalData.userInfo = res_token.data.extra
            this.globalData.userInfo.avatarUrl =
              this.globalData.userInfo.avatarUrl || require('@/assets/img/dfimg.jpg')
            localStorage.setItem('accesstoken', res_token.data.access_token)
            localStorage.setItem('userInfo', JSON.stringify(res_token.data.extra))
            this.$vux.loading.hide()
            window.location.href = this.$route.path
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: res_token.msg
            })
            this.globalData.access_token = this.globalData.userInfo = null
            setInterval(function () {
              window.location.href = res_token.data.url
            }, 1500)
          }
        } else if (source == 'zhiguhui' && state == false) {
          this.$vux.loading.show({
            text: '登录中'
          })
          let res_code = await Account.authLoginGetCode(source)
          if (res_code.code == 0 && res_code.data.url != '' && res_code.data.url != undefined) {
            window.location.href = res_code.data.url
          }
        }
      },
      async getQueryVariable (variable) {
        var query = window.location.search.substring(1)
        var vars = query.split('&')
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split('=')
          if (pair[0] == variable) {
            return pair
          }
        }
        return false
      },
      onScanTap () {
      },
      async onDetailTap (item) {
        var pos = parseInt(item.redirect_pos)
        if (pos !== 1) {
          window.location.href = item.url
          return
        }
        if (!item.redirect_url) return

        if (item.redirect_url === 'toJDTinyGo') {
          this.toJDTinyGo()
          return
        }
        this.$router.push({ name: item.redirect_url })
      },

      // 跳转微购
      async toJDTinyGo () {
        let res = await Mall.getJDUrl()
        this.jdData = res.data.data
        this.jdUrl = res.data.url
        let _this = this
        this.$nextTick(function () {
          _this.$refs.submitJD.submit()
        })
      },

      onSearchTap () {
        this.$router.push({ name: 'mallSearch' })
      },
      onDiscountTap (id) {
        this.$router.push({ name: 'mallDiscount', params: { id: id } })
      },
      onSeckillTap () {
        this.$router.push({ name: 'mallSeckill' })
      },
      onGroupTap () {
        this.$router.push({ name: 'mallGroup' })
      },
      onDistributionTap () {
        this.$router.push({ name: 'mallDistribution' })
      },
      onGetCouponTap () {
        this.$router.push({ name: 'mallGetcoupon' })
      },
      onMeTap () {
        if (globalData.access_token == 'default-access_token') {
          this.$router.replace({ name: 'login' })
        } else {
          this.$router.push({ name: 'me' })
        }
      },
      onCartTap () {
        if (globalData.access_token == 'default-access_token') {
          this.$router.replace({ name: 'login' })
        } else {
          this.$router.push({ name: 'shopping' })
        }
      },
      onClassTap () {
        this.$router.push({ name: 'mallClassify' })
      },
      onOptimizationTap () {
        let so = {
          filter: 1
        }
        this.$router.push({
          name: 'mallSearch',
          query: { so: JSON.stringify(so), title: '觅来', load: true }
        })
      },
      // banner 跳转
      onSpecialTap (item) {
        this.$router.push({
          name: 'mallSpecial',
          params: { topicId: item.topic_id },
          query: { item: JSON.stringify(item) }
        })
      },

      // 首页banner 菜单
      async getNavBanner () {
        let res = await Mall.getNavBanner()
        if (res.code == 0) {
          this.xheader.title = res.data.terminal_title || '内购商城'
          this.bannerList = res.data.banner_list
          this.iconNavs = res.data.nav_list
          // this.$nextTick(function () {
          // eslint-disable-next-line no-unused-vars
          // let swiperNav = new Swiper('.swiper-container-tab', {
          //   slidesPerView: 4,
          //   spaceBetween: 0,
          //   pagination: {
          //     el: '.swiper-pagination',
          //     clickable: true
          //   }
          // })

          // eslint-disable-next-line no-unused-vars
          // let swiperBanner = new Swiper('.swiper-container-banner', {
          //   spaceBetween: 12,
          //   autoplay: true,
          //   centeredSlides: true,
          //   autoplayDisableOnInteraction: false,
          //   pagination: {
          //     el: '.swiper-pagination',
          //     clickable: true
          //   }
          // })
          // })
        }
      },

      // 获取频道精选
      async getChannelList () {
        let res = await Mall.getChannelList()
        if (res.code == 0) {
          this.specialList = res.data
        }
      },
      // 获取推荐列表
      async getRecommendlList () {
        let res = await Mall.getRecommendlList()
        if (res.code == 0) {
          this.recommendlList = res.data
        }
      },
      // 获取商城楼层列表
      async getFloorList () {
        let res = await Mall.getFloorList()
        if (res.code == 0) {
          this.floorList = res.data
        }
      },

      // 设置公告上下滚动
      setNoticeRoll () {
        this.timerRoll = setInterval(() => {
          this.$nextTick(function () {
            if (!this.$refs.noticeTitle) {
              return
            }
            let _offsetHeight = this.$refs.noticeTitle.offsetHeight // 滚动元素的高度
            this.noticeTranslateY -= 19
            if (this.noticeTranslateY <= -_offsetHeight) {
              this.noticeTranslateY = 0
            }
            this.$refs.noticeTitle.style.transform = `translateY(${this.noticeTranslateY}px)`
          })
        }, 10000)
      },

      // 进入视屏带货列表
      onVideoList () {
        this.$router.push({ name: 'video' })
      },

      // 获取视频带货列表
      async getSpecialVideoList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getTopicVideoList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.specialVideoList = res.data.topic_list
        }
      },

      // 获取秒杀列表
      async getSeckillTime () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getNewSeckill()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.seckill_list.length) {
            this.seckillList = []
            return
          }

          for (let i = 0; i < res.data.seckill_list.length; i++) { // 判断是否有即将开始的场次
            if (res.data.seckill_list[i].seckill_status == 1) {
              this.seckillList = res.data.seckill_list[i].seckill_goods_list
              this.seckillListStatus = res.data.seckill_list[i]
              break
            } else if (res.data.seckill_list[i].seckill_status == 0) { // 判断是否有已经开始的场次
              this.seckillList = res.data.seckill_list[i].seckill_goods_list
              this.seckillListStatus = res.data.seckill_list[i]
              break
            }
          }
        }
      },

      onMallInfo (id) {
        this.$router.push({ name: 'mallInfo', params: { id } })
      }
    }
  }

  function getQueryVariable (variable) {
    var query = window.location.search.substring(1)
    var vars = query.split('&')
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=')
      if (pair[0] == variable) {
        return pair[1]
      }
    }
    return false
  }
</script>

<style lang="less" scoped>
  .page {
    /*padding-top: 45px;*/
    padding-bottom: 25px;
  }

  .pagetop {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .user_icon {
    width: 20px;
    height: 20px;
    padding-left: 12px;
    padding-right: 12px;
    display: block;
  }

  .topbar {
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .topbar .icon {
    width: 20px;
    height: 20px;
    padding: 0 5px;
    display: block;
  }

  .topbar .inputbox {
    background: #fbf8f7;
    height: 35px;
  }

  .topbar .input {
    font-size: 12px;
    color: #351009;
    text-align: center;
    line-height: 17px;
  }

  .iconbox {
    /*background-color: #fff;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .iconbox .icon {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: #f5f5f5;
  }

  .iconbox .text {
    line-height: 20px;
    font-size: 14px;
    color: #351009;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pendbox .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pendbox .header .title {
    font-size: 15px;
    color: #351009;
    line-height: 24px;
  }

  .pendbox .header .subtitle {
    font-size: 12px;
    color: #848484;
  }

  .pendbox .header .more {
    color: #a8a8a8;
    font-size: 12px;
  }

  .recommendbox .item {
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
  }

  .recommendbox .item image {
    display: block;
    height: 330px;
    width: 100%;
    background-color: #f5f5f5;
  }

  .recommendbox .item .title {
    font-size: 12px;
    line-height: 17px;
    margin-top: 20px;
    color: #737373;
    font-weight: 600;
  }

  .recommendbox .item .desc {
    font-size: 10px;
    line-height: 15px;
    color: #737373;
  }

  .recommendbox .item .qt {
    display: flex;
    margin-top: 12px;
    color: #575757;
    font-size: 10px;
    line-height: 20px;
  }

  .recommendbox .item .qt .price {
    font-size: 14px;
  }

  .recommendbox .item .bag {
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 24px;
    font-size: 10px;
    height: 12px;
    line-height: 14px;
  }

  .recommendbox .item .bag-ticket {
    background-color: #ff230c;
    color: #fff;
  }

  .recommendbox .item .bag-active {
    background-color: #920882;
    color: #fff;
  }

  .recommendbox .item + .item {
    margin-top: 12px;
  }

  .price {
    color: #fd0002;
  }

  .d-price {
    color: #8a8687;
    text-decoration: line-through;
  }

  .subjectbox {
    padding: 12px;
    background-color: #fff;
  }

  .subjectbox .item {
    background-color: #fe0000;
    border-radius: 10px;
  }

  .subjectbox .item .image {
    display: block;
    border-radius: 10px;
    height: 127px;
    width: 100%;
    background-color: #f5f5f5;
  }

  .subjectbox .item .titlebar {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    display: flex;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    align-items: center;
  }

  .subjectbox .item .title {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .subjectbox .item .icon {
    height: 15px;
    width: 15px;
    border-radius: 8px;
    background-color: #fff;
  }

  .subjectbox .item .desc {
    margin-top: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    font-size: 12px;
    color: #fff;
    line-height: 17px;
  }

  .streamer {
    /*height: 163px;*/
    width: 100%;
    display: block;
    background-color: #fff;
  }

  .commoditybox {
    background-color: #fff;
  }

  .commoditybox-no {
    background-color: transparent;
  }

  .commoditybox-no .item {
    padding: 12px;
  }

  .commoditybox .streamer {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .commoditybox .item {
    display: block;
    background-color: #ffffff;
  }

  .commoditybox .item .imgge {
    height: 158px;
    width: 100%;
    display: block;
  }

  .commoditybox .item .title {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #5f5d5e;
  }

  .commoditybox .item .bagbar {
    display: flex;
    margin-left: -10px;
    margin-top: 8px;
  }

  .commoditybox .item .bagbar .bag {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    display: block;
    margin-left: 12px;
    border: 1px solid transparent;
  }

  .commoditybox .item .bagbar .bag-ticket {
    border-color: #fd0002;
  }

  .commoditybox .item .bagbar .bag-active {
    border-color: #920882;
  }

  .commoditybox .item .pricebar {
    margin-top: 8px;
    display: flex;
  }

  .commoditybox .item .pricebar .price {
    font-size: 14px;
    line-height: 20px;
    color: #fe0000;
    flex: 1;
  }

  .commoditybox .item .pricebar .icon {
    height: 15px;
    width: 15px;
    display: block;
    border-radius: 8px;
    margin-left: 12px;
  }

  /* 改变导航栏的排列方式 */

  .grid {
    transition: all .5s;
    flex-wrap: nowrap;
    /*overflow: scroll;*/
    /*-webkit-overflow-scrolling: touch;*/
  }

  /*移动端显示滚动条*/

  .grid::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .grid::-webkit-scrollbar:vertical {
    width: 1px;
  }

  .grid::-webkit-scrollbar:horizontal {
    height: 1px;
  }

  .grid::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid #ffffff;
  }

  .grid::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }

  .grid::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  /*banner*/
  .swiper-container-banner /deep/ img {
    height: 206px;
    width: 100%;
  }

  .swiper-container-banner {
    position: relative;
  }

  /*购物车数量*/
  .tabbar-item {
    position: relative;

    .goodsNum {
      position: absolute;
      right: 20px;
    }
  }

  /*视频带货*/
  .video {

    * {
      box-sizing: border-box;
    }

    .video-con {
      background: #fff;
      padding: 12px;

      .video-con-header {
        font-size: 15px;
        color: #351009;
        line-height: 24px;
        margin-bottom: 12px;
        font-weight: 600;
      }

      .video-con-box {
        .video-con-box-item {
          display: flex;

          .video-con-box-item-right {
            background: rgba(251, 247, 247, 1);
            flex-shrink: 0;
            max-width: 120px;

            .video-con-box-item-right-title {
              font-size: 12px;
              color: rgba(51, 51, 51, 1);
              margin: 10px 10px 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .video-con-box-item-right-desc {
              display: flex;
              align-items: baseline;
              padding: 0 7px 4px;

              .video-con-box-item-right-desc-icon {
                width: 11px;
                height: 13px;
                background: url("../../assets/img/icon_fire.png") no-repeat center;
                background-size: cover;
                margin-right: 5px;
              }

              .video-con-box-item-right-desc-text {
                color: #2195F3;
                font-size: 9px;
              }
            }

            .video-con-box-item-right-goods {
              padding: 2px;
              display: flex;

              .video-con-box-item-right-goods-item {
                position: relative;
                font-size: 0;
                width: 57px;
                height: 57px;
                margin-right: 2px;
                border-radius: 10px;

                &:nth-child(2n) {
                  margin: 0;
                }

                .video-con-box-item-right-goods-item-img {
                  width: 100%;
                  height: 100%;
                }

                .video-con-box-item-right-goods-item-price {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                  font-size: 9px;
                  color: #fff;
                  background: url("../../assets/img/icon_goods_back.png") no-repeat center;
                  background-size: cover;
                  display: flex;
                  align-items: flex-end;
                  justify-content: center;
                  padding-bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*公告*/

  .notice {
    display: flex;
    margin: 12px 10px;
    height: 19px;
    overflow: hidden;
    align-items: flex-start;

    .notice-icon {
      flex-shrink: 0;
      width: 19px;
    }

    .notice-title {
      flex: 1;
      color: #4E4E4E;
      font-size: 14px;
      margin-left: 4px;
      overflow: hidden;
      transition: all 0.5s;

      .notice-title-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 19px;
        line-height: 19px;
      }
    }
  }

  /*活动*/
  .activity {
    display: flex;
    margin-top: 0;
    padding: 10px 10px 0;

    .activity-content {
      flex-shrink: 0;
      width: 100%;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;

      .activity-content-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .activity-content-head-more {
          color: #a8a8a8;
          font-size: 12px;
        }

        .activity-content-head-time {
          display: flex;
          align-items: center;
        }

        .activity-content-head-title {
          font-size: 14px;
          color: #000;
          font-weight: 600;
          flex-shrink: 0;
        }

        .activity-content-head-desc {
          color: #323232;
          font-size: 10px;
          font-weight: 400;
          margin-left: 1%;
          flex-shrink: 0;

          .activity-content-head-desc-tim-num {
            background: rgba(231, 24, 24, 1);
            padding: 1px 1px;
            color: #fff;
            border-radius: 2.5px;
          }
        }
      }

      .activity-content-box {
        display: flex;
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;

        .activity-content-box-item {
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

          img {
            border-radius: 2.5px;
          }
        }
      }

      .activity-content-border:after {
        height: 74px;
        content: ' ';
        width: 1px;
        background: rgba(0, 0, 0, 0.11);
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
      }

      .activity-content-mini {
        .activity-content-box-item {
          width: 28.148%;
          margin-right: 3.11%;

          &:last-child {
            margin-right: 0;
          }

          .activity-content-box-item-img {
            width: 100%;
            height: 76px;
            max-height: 76px;
          }

          .activity-content-box-item-price {
            font-size: 11px;
            color: #FE0000;
            margin: 2px 0;
          }

          .activity-content-box-item-old {
            font-size: 9px;
            color: #808080;
            text-decoration: line-through;
          }
        }
      }

      .activity-content-big {
        .activity-content-box-item {
          width: 44%;
          margin-right: 9%;
          height: 90px;
          position: relative;
          background: #ffeadf;
          padding: 0 4px;
          text-align: center;
          overflow: hidden;
          border-radius: 5px;

          .activity-content-box-item-ti {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            background: radial-gradient(circle, rgba(255, 105, 13, 1) 0%, rgba(255, 141, 32, 1) 100%);
            border-radius: 2.5px 0 2.5px 0;
            font-size: 9px;
            padding: 1px 4px;
            max-width: 70%;
          }

          .activity-content-box-item-num {
            color: rgba(33, 33, 33, 1);
            font-weight: bold;
            font-size: 16px;
            margin-top: 10px;
          }

          .activity-content-box-item-desc {
            font-size: 9px;
            color: #212121FF;
            padding-bottom: 10px;
            margin-bottom: 7px;
            border-bottom: 1px dashed rgba(244, 204, 179, 1);
            width: 100%;

            &:before {
              width: 5px;
              height: 5px;
              background: #fff;
              display: block;
              content: ' ';
              border-radius: 50%;
              position: absolute;
              bottom: 28px;
              left: 0;
              transform: translateX(-50%);
            }

            &:after {
              width: 5px;
              height: 5px;
              background: #fff;
              display: block;
              content: ' ';
              border-radius: 50%;
              position: absolute;
              bottom: 28px;
              right: 0;
              transform: translateX(50%);
            }
          }

          .activity-content-box-item-btn {
            background: #ff7010;
            font-size: 9px;
            border-radius: 10px;
            padding: 2px 4px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
